<template>
    <div>
        <el-card>
        <!--头部搜索添加区-->
          <el-row>
            <el-col :span="12">
              <el-input placeholder="请输入内容"  clearable @clear="getEmployeeList" v-model="searchInfo.query" class="input-with-select">
                <el-button  slot="append" style="background-color: #FFc300" @click="getEmployeeList" icon="el-icon-search"></el-button>
              </el-input>
            </el-col>
            <el-col :span="12">
              <el-button class="addEmployeeBtn yellowBtn"
                         @click="showAddEmployeeDialog">新增员工</el-button>
            </el-col>
          </el-row>

            <!--新增员工-->

            <el-table
                    :data="employeeList"
                    border
                    style="width: 100%;height: 100%;margin-top: 10px"
                    v-loading="isLoading">
                <el-table-column type="expand">
                    <template slot-scope="scope">
                        <p>
                            <span class="preSpan">真实姓名:</span>
                            <span class="lastSpan">{{scope.row.name}}</span>
                        </p>
                        <p>
                            <span class="preSpan">家庭住址:</span>
                            <span class="lastSpan">{{scope.row.address}}</span>
                        </p>
                        <p>
                            <span class="preSpan">电话号码:</span>
                            <span class="lastSpan">{{scope.row.telephone}}</span>
                        </p>
                        <p>
                            <span class="preSpan">身份证号:</span>
                            <span class="lastSpan">{{scope.row.identity}}</span>
                        </p>
                        <p>
                            <span class="preSpan">密码:</span>
                            <span class="lastSpan">{{scope.row.password}}</span>
                        </p>

                    </template>
                </el-table-column>
                <el-table-column
                        type="index"
                        :index="1" label="#">
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="用户名">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名">
                </el-table-column>
                <el-table-column
                        prop="sex"
                        label="姓别" width="60px">
                </el-table-column>
                <el-table-column
                        prop="role.roleName"
                        label="角色">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="注册时间" sortable>
                </el-table-column>
                <!--员工头像-->
                <el-table-column label="员工头像">
                    <template slot-scope="scope">
                        <div class="block" v-if="scope.row.headPortrait">
                            <el-avatar
                                    shape="square"
                                    :size="50"
                                    :src="scope.row.headPortrait">
                            </el-avatar>
                        </div>
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadFileUrl"
                                :show-file-list="false"
                                :on-success="(response, file, fileList) => {return uploadHeaderImg(response,scope.row.eid);}"
                                name="uploadFile"
                                >
                            <i  class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </template>
                </el-table-column>
                <!--员工的启用状态-->
                <el-table-column :sortable="true" :sort-by="'enable'" width="110px" label="是否启用">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.enable"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                @change="updateEmployeeState(scope.row)"
                                >
                        </el-switch>
                    </template>
                </el-table-column>
                <!--操作-->
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                class="yellowBtn"
                                icon="el-icon-edit"
                                @click="showEditEmployeeDialog(scope.row)"
                                >
                        </el-button>
                        <el-button type="danger"
                                   @click="deleteEmployee(scope.row)"
                                   icon="el-icon-delete"
                                   >
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchInfo.pagenum"
                    :page-sizes="[5,10,15]"
                    :page-size="searchInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totalPage" >
            </el-pagination>
        </el-card>
        <!--新增员工-->
        <el-dialog
                width="30%"
                title="新增员工"
                :visible.sync="addEmployeeDialogFormVisible">
            <el-form
                    label-width="80px"
                    label-position="right"
                    :model="addEmployeeForm"
                    :rules="addEmployeeFormRules"
                    ref="addEmployeeFormRef">
                <el-form-item prop="username" label="用户名" >
                    <el-input v-model="addEmployeeForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input v-model="addEmployeeForm.password"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="真实姓名">
                    <el-input v-model="addEmployeeForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="telephone" label="电话号码">
                    <el-input v-model="addEmployeeForm.telephone"></el-input>
                </el-form-item>
                <el-form-item prop="address" label="家庭住址">
                    <el-input v-model="addEmployeeForm.address"></el-input>
                </el-form-item>
                <el-form-item prop="indentity" label="身份证号">
                    <el-input v-model="addEmployeeForm.indentity"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="addEmployeeForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item prop="rid" label="角色" >
                    <el-select v-model="addEmployeeForm.rid" placeholder="请选择角色">
                        <el-option v-for="role in roleList"
                                   :label="role.roleName"
                                   :value="role.rid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addEmployeeDialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click="addEmployee">确 定</el-button>
            </div>
        </el-dialog>
        <!--修改员工-->
        <el-dialog
                width="30%"
                title="修改员工"
                :visible.sync="editEmployeeDialogFormVisible">
            <el-form
                    label-width="80px"
                    label-position="right"
                    :model="editEmployeeForm"
                    :rules="editEmployeeForm"
                    ref="addEmployeeFormRef">
                <el-form-item prop="username" label="用户名" >
                    <el-input v-model="editEmployeeForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码">
                    <el-input v-model="editEmployeeForm.password"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="真实姓名">
                    <el-input v-model="editEmployeeForm.name"></el-input>
                </el-form-item>
                <el-form-item prop="telephone" label="电话号码">
                    <el-input v-model="editEmployeeForm.telephone"></el-input>
                </el-form-item>
                <el-form-item prop="address" label="家庭住址">
                    <el-input v-model="editEmployeeForm.address"></el-input>
                </el-form-item>
                <el-form-item prop="identity" label="身份证号">
                    <el-input v-model="editEmployeeForm.identity"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="editEmployeeForm.sex">
                        <el-radio label="男"></el-radio>
                        <el-radio label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item  label="角色" >
                    <el-select v-model="editEmployeeForm.role.rid" placeholder="请选择角色">
                        <el-option v-for="roles in roleList"
                                   :label="roles.roleName"
                                   :value="roles.rid">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="editEmployeeDialogFormVisible=false">取 消</el-button>
                <el-button type="primary" @click="editEmployee">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "Employee",
        data(){
            return {
                employeeList:[],
                searchInfo:{
                    query:'',
                    pagesize:5,
                    pagenum:1
                },
                addEmployeeForm:{
                    username:'',
                    password:'',
                    name:'',
                    sex:'',
                    telephone:'',
                    address:'',
                    indentity:'',
                    rid:''
                },
                editEmployeeForm:{
                    role:{rid:''}
                },
                roleList:[],
                totalPage:0,
                imageUrl:'',
                showHeaderImgVisible:false,
                dialogImageUrl:'',
                addEmployeeDialogFormVisible:false,
                editEmployeeDialogFormVisible:false,
                addEmployeeFormRules:{
                    username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password:[ { required: true, message: '请输入密码', trigger: 'blur' }],
                    name:[ { required: true, message: '请输入姓名', trigger: 'blur' }],
                    address:[ { required: true, message: '请输入地址', trigger: 'blur' }],
                    sex:[ { required: true, message: '请选择性别', trigger: 'blur' }],
                    indentity:[ { required: true, message: '请输入身份证号', trigger: 'blur' }],
                    rid:[ { required: true, message: '请选择角色', trigger: 'blur' }],
                    telephone:[ { required: true, message: '请选择角色', trigger: 'blur' }],
                },
                editEmployeeFormRules:{
                    username:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
                    password:[ { required: true, message: '请输入密码', trigger: 'blur' }],
                    name:[ { required: true, message: '请输入姓名', trigger: 'blur' }],
                    address:[ { required: true, message: '请输入地址', trigger: 'blur' }],
                    sex:[ { required: true, message: '请选择性别', trigger: 'blur' }],
                    indentity:[ { required: true, message: '请输入身份证号', trigger: 'blur' }],
                    rid:[ { required: true, message: '请选择角色', trigger: 'blur' }],
                    telephone:[ { required: true, message: '请选择角色', trigger: 'blur' }],
                },
                isLoading:true
            }
        },
          computed:{
            uploadFileUrl(){
              let fileUploadUrl=this.$fileUploadUrl;
              return fileUploadUrl
            }
          }

        ,methods:{
            //获取员工列表
           async getEmployeeList(){
              this.isLoading=true
              const{data:res}=await this.$http.get("/employee/findEmployee",{params:this.searchInfo})
               if (res.status!=200)return this.$message.error("查询员工列表失败")
               this.employeeList=res.data.employees
               this.totalPage=res.data.totalPage
              this.isLoading=false
            },
            //每页大小发生变化时
            handleSizeChange(newSize){
               this.searchInfo.pagesize=newSize
                this.getEmployeeList()
            },
            //页数发生变化时
            handleCurrentChange(newPage){
               this.searchInfo.pagenum=newPage
                this.getEmployeeList()
            },
            //上传头像文件
            uploadHeaderImg(res,eid){
               /*res:响应对象 file:文件对象*/
                this.$http.post("/employee/updateHeaderImage",{eid:eid,imageUrl:res.data})
                this.getEmployeeList()
                this.$message.success("上传头像成功");
            },
            //修改员工的状态
           async updateEmployeeState(employee){
              const{data:res}=await this.$http.put("/employee/updateStatus/"+employee.eid,{status:employee.enable})
              if (res.status!=200)return this.$message.error('修改用户状态失败')
              if (employee.enable){
                  this.$message.success(`员工${employee.name}已启用`)
              }else{
                  this.$message.warning(`员工${employee.name}已禁用`)
              }
           },
            //删除员工
            deleteEmployee(employee){
                this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                  const{data:res}=await this.$http.delete("/employee/deleteEmployee/"+employee.eid)
                    if (res.status!=200)this.$message.error('删除员工失败')
                    this.$message(`员工${employee.name}已删除`);
                    this.getEmployeeList()
                }).catch(() => {
                    this.$message({

                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //打开添加员工窗口
           showAddEmployeeDialog(){
               this.getRoleList()
               this.addEmployeeDialogFormVisible=true
            },
            //打开编辑员工窗口
            showEditEmployeeDialog(employee){
                this.editEmployeeForm=employee
                this.getRoleList()
                this.editEmployeeDialogFormVisible=true
            },
            //新增员工
            addEmployee(){
               this.$refs.addEmployeeFormRef.validate(async valid=>{
                   if (!valid)return
                  const{data:res}=await this.$http.post("/employee/addEmployee/"+this.addEmployeeForm.rid,this.addEmployeeForm)
                   if (res.status!=200)return this.$message.error('添加员工失败')
                   this.$message.success("添加员工成功")
                   this.addEmployeeDialogFormVisible=false
                   this.getEmployeeList()
               })
            },
            //修改员工
           async editEmployee(){
               const {data:res}=await this.$http.put("/employee/updateEmployee?rid="+this.editEmployeeForm.role.rid,this.editEmployeeForm);
                if(res.status!=200)return this.$message.error("修改员工信息失败");
                this.$message.success("修改员工信息成功");
                this.getEmployeeList();
                this.editEmployeeDialogFormVisible=false
           },
            //获取角色列表
           async getRoleList(){
                const{data:res}=await this.$http.get("/role/findRoleList")
                if (res.status!=200)return this.$message.error('查询角色列表失败')
                this.roleList=res.data
            },
            //校验权限
            checkRolePower(pid){
              return this.$checkRolePower(pid);
            }
        },created() {
            this.getEmployeeList()
        }
    }
</script>

<style scoped>
    .avatar-uploader{
        width: 50px;
        height: 50px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader-icon{
        font-size: 25px;
       transform: translateX(11px) translateY(12px);
    }
    .block{
        float: left;
        margin-right: 10px;
    }
    .input-with-select{
        width: 260px;

    }
    .addEmployeeBtn{
        float: right;
        margin-right: 10px;
    }
    .searchEmployee{
        margin-bottom: 20px;
    }
    .preSpan{
        font-size: 16px;
        color: #99a9bf;
        margin-left: 18px;
    }
    .lastSpan{
        font-size: 16px;
        margin-left: 15px;
        margin-left: 15px;
    }
    .yellowBtn {
      background-color: #FFc300;
    }

</style>
